<template>
  <div ref="echartsContainer" :style="{width,height}"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted , ref , watch  } from 'vue';
const props = defineProps({
  option:Object,
  width:{
      type:String,
      default:'100%',
  },
  height:{
      type:String,
      default:'100%',
  }
})

const echartsContainer = ref(null);
let chartInstance:any = null;
onMounted(()=>{
  chartInstance = echarts.init( echartsContainer.value );
  chartInstance.setOption( props.option );
})

watch(()=>props.option,(newValue)=>{
  if( chartInstance ){
      chartInstance.setOption( newValue );
  }
},{deep:true});
</script>